/** * Create by mzq * Description: 登录 * Date: 2025/2/8 16:46 * Update:
2025/2/8 16:46 */

<template>
  <div class="login">
    <div class="title">用户登录</div>
    <div class="inputContent">
      <input
        class="inputAccount"
        type="text"
        confirm-type="next"
        placeholder="请输入账号"
        placeholder-class="inputPlaceholder"
        v-model="account"
        maxlength="10" />

      <input
        class="inputPwd"
        type="text"
        confirm-type="done"
        placeholder="请输入密码"
        placeholder-class="inputPlaceholder"
        v-model="pwd"
        maxlength="10"
        password="true" />
    </div>

    <div class="sheetView">
      <div class="rememberPwdView">
        <div @click="rememberPwd()">
          <image
            v-if="!isRemember"
            src="../../../image/index/icon_choice.png"
            mode="widthFix"></image>
          <image
            v-else
            src="../../../image/index/icon_choiced.png"
            mode="widthFix"></image>
        </div>

        <div>记住密码</div>
      </div>
      <div class="register" @click="registerBtn">用户注册</div>
    </div>

    <div class="loginBtn" @click="loginBtn">
      <image src="../../../image/index/loginBtn.png" mode="widthFix"></image>
    </div>

    <!--  用户注册  -->
    <RegisterDiaLog
      @close="showDialog = false"
      :visible="showDialog"></RegisterDiaLog>
  </div>
</template>
<script>
import RegisterDiaLog from '@/pages/index/components/RegisterDiaLog.vue'
import { readJsonFromFile } from '@/utils/fileUtil'
import { toast } from '@/utils'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'login',
  components: { RegisterDiaLog },
  data() {
    return {
      // 用户名
      account: '',
      // 密码
      pwd: '',

      // 是否记住密码
      isRemember: false,

      // 注册弹框
      showDialog: false,
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    // 用户注册
    registerBtn() {
      this.showDialog = true
    },

    // 登录按钮功能
    loginBtn() {
      // 从json文件读取用户数据
      const users = readJsonFromFile('/sdcard/test/user.json') || []

      // 查找用户
      const user = users.find(
        (u) => u.name === this.account && u.password === this.pwd
      )
      console.log(users)
      if (user) {
        // 登录成功
        toast('登录成功');

        // 将用户信息保存到Vuex中，无论是否勾选记住密码
        const userInfo = { 
          id: user.id, 
          name: user.name, 
          account: this.account,
          password: this.pwd  // 添加密码到用户信息中
        };
        this.setUserInfo(userInfo);
        
        // 将用户信息也保存到本地存储中
        uni.setStorageSync('userInfo', userInfo);

        // 根据是否勾选了记住密码来保存或清除账户信息
        if (this.isRemember) {
          // 使用uni.setStorageSync将账户信息保存到本地存储中
          uni.setStorageSync('account', this.account);
          uni.setStorageSync('pwd', this.pwd);
        } else {
          // 如果没有勾选记住密码，则清除已保存的账户信息
          uni.removeStorageSync('account');
          uni.removeStorageSync('pwd');
        }

        uni.reLaunch({
          url: '/pages/userMenu/userMenu',
        })
      } else {
        // 登录失败
        toast('账号或密码错误');
      }
    },

    // 记住密码
    rememberPwd() {
      this.isRemember = !this.isRemember
    },
  },
  mounted() {
    // 页面加载时检查是否有记住的账户信息并自动填充
    this.account = uni.getStorageSync('account');
    this.pwd = uni.getStorageSync('pwd');
    if (this.account && this.pwd) {
      this.isRemember = true;
    }
  },
}
</script>
<style scoped lang="scss">
.login {
  position: absolute;
  left: 50%; /* 水平起点定位到父容器50% */
  top: 50%; /* 垂直起点定位到父容器50% */
  transform: translate(-50%, -50%); /* 自身偏移-50%以实现完全居中 */
  width: 526px;
  height: 411px;
  background: url('@/image/index/loginBox.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  .title {
    padding-top: 40px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 36px;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .inputContent {
    padding-top: 40px;

    .inputAccount,
    .inputPwd {
      width: 250px;
      font-size: 17px;
      font-family: OPPOSans;
      font-weight: 400;
      color: #bfbfbf;
      line-height: 17px;
    }

    .inputPwd {
      padding-top: 34px;
    }
  }

  .sheetView {
    width: 61%;
    margin-top: 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rememberPwdView {
      display: flex;
      align-items: center;

      image {
        padding-top: 4px;
        margin-right: 10px;
        width: 15px;
        height: 15px;
      }
    }

    .register {
      padding-bottom: 1px;
      border-bottom: 1px solid white;
    }
  }

  .loginBtn {
    padding-top: 20px;

    image {
      width: 213px;
    }
  }
}

.inputPlaceholder {
  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
}
</style>
